    
let View = (function () {
       

     // 进行id 和 内容 class 的 index 的映射
     let map = {

        "insertAttractions" :0 ,
          "searchAttractions":1 ,
           "delete":2,
           "insertPath":3,
           "serchPath": 4

    }


     // 除了传进来的下标外，其它的都设置成 display 为 none
     let toggleFunction = function (index){

        let content =  document.getElementsByClassName("content")


        for(let i of content){

            i.style.display = "none"

        }

        console.log(index);

        content[index].style.display = "block" ;

}
 

// 获取所有景点的信息，然后添加到 select 中

let setselect = function (selector1 , selector2){
    
    let select1 =  document.getElementById(selector1)
    
    let select2 = document.getElementById(selector2);
    
    let data =  CHART.getAllAttractions()

    console.log(data)
    
    // 将 select 的选项进行清空
    select1.innerHTML = '';
    select2.innerHTML = '' ;
    
    
    for(let item of data){
    
    select1.appendChild(new Option(item.name ));
    
    select2.appendChild(new Option(item.name ));
    
    }
    
}
    

    // 实现手风琴效果

    let accordion = function (selector,index){

        var el = document.getElementsByClassName(selector)[index];

        if(window.getComputedStyle(el).height === "0px"){
    // mac Safari下，貌似auto也会触发transition, 故要none下~
    el.style.transition = "none";
    el.style.height = "auto";
    var targetHeight = window.getComputedStyle(el).height;
    el.style.transition = "height 600ms"
    el.style.height = "0px";
    el.offsetWidth;//触发浏览器重排
    el.style.height = targetHeight;
}else{
    el.style.height="0px";
}

    }

    let changeBackground = function (el) {

        let imageIndex = Math.floor(Math.random() * 40)

         // 修复切换背景图时出现的“白色闪屏”现象
        let img = new Image();
        img.src = `./image/${imageIndex}.jpg`
        // 确定图片加载完成后再进行背景图片切换

        img.onload = function () {

           el.style.backgroundImage = `url('${img.src}')`

        }

    }


    let showData = function(){

       let element  = document.getElementById("showData");

       let data =  CHART.getAllAttractions();


        console.log(data)


       let html = `<div style="padding-top:20px;width:100%; padding-bottom: 20px; border-bottom: 1px solid rgba(34,36,38,.15); display:flex;">
       <div style="flex:1"><h3 style="color:#00b5ad!important">景点列表</h3></div>
       <div style="flex:1">共 <h2 style="color:#f2711c!important; display:inline-block">${data.length}</h2>个景点</div>
       </div>` ;



       for(let i = 0 ; i < data.length ; i++){




        html += `
        
        <div style="padding-top:20px;width:100%; padding-bottom: 20px; border-bottom: 1px solid rgba(34,36,38,.15);">
        <div style="display:flex ; flex-direction: row; justify-items: flex-start;">
            <div style="flex: 2;">
                <h3 style="margin-bottom: 20px;">
                    <a  style="color: #333333;text-decoration: none;" >${data[i].name}</a>
                </h3>
                <p  style=" color: rgba(0, 0, 0, .87);font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif; font-weight: 300; padding-right:20px ;">${data[i].Introduction}</p>
            </div>
            <div style="flex: 1;">
                    <img src="https://unsplash.it/800/600?image=${Math.floor(Math.random()*1000)}" alt="" class="ui rounded image" style="border-radius: 20px;max-width: 100%;">
            </div>
        </div>
    </div> 
        `

       }


       element.innerHTML = html ;

      

    }
    
    return {
        
        map,
        setselect,
        accordion,
        toggleFunction,
        changeBackground,
        showData
    }


 } )()
    
   